<template>
    <div class="headerbox">
        <div class="header">
            <div class="headerL">
                <a onclick="javascript:history.back(-1)" class="goback">
                    <img src="/assets/images/goback.png" />
                </a>
            </div>
            <!-- 搜索关键字 -->
            <div class="headerC0">
                <div class="ssdiv">
                    <img src="/assets/images/ss.png" />
                    <input
                        v-model="keywords"
                        type="text"
                        placeholder="输入关键字"
                        @change="SelectKeywords"
                    />
                </div>
            </div>
            <div class="headerR">
                <a>
                    <img src="/assets/images/tr.png" @click="showPopup = true" />
                </a>
            </div>
            <!-- 分类弹出层 -->
            <div>
                <van-popup v-model:show="showPopup" position="right">
                    <div class="typelist">
                        <a
                            v-for="item in typeList"
                            :key="item.id"
                            @click="SelectType(item.id)"
                        >{{ item.name }}</a>
                    </div>
                </van-popup>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <!-- 下拉菜单 -->
    <div class="shopType">
        <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" @change="SelectGoods" />
            <van-dropdown-item v-model="value2" :options="option2" @change="SelectSort" />
        </van-dropdown-menu>
    </div>
    <div class="clear"></div>
    <div class="hbox"></div>
    <!-- 产品页面 -->
    <div class="mainWarp" style="background:#f3f3f3">
        <ul class="proul">
            <li v-for="item in productList" :key="item.id">
                <router-link :to="{ path: '/product/product/info', query: { proid: item.id } }">
                    <img :src="item.cover_cdn" />
                </router-link>
                <router-link :to="{ path: '/product/product/info', query: { proid: item.id } }">
                    <p class="tit">{{ item.name }}</p>
                </router-link>
                <div class="price">
                    <p>
                        ￥{{ item.price }}
                        <span>￥{{ item.price }}</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>
    <div class="clear"></div>
    <div class="h54"></div>
</template>
<script>
    export default {
        emits: ['toggle'],
        // 传值给到父组件
        created() {
            this.$emit('toggle', false)
            // 接收路由的传值
            this.typeid = this.$route.query.typeid
            this.productData();
        },
        data() {
            return {
                keywords: null,
                showPopup: false,
                option1: [
                    { text: '全部商品', value: 0 },
                    { text: '新款商品', value: 1 },
                    { text: '热销商品', value: 2 },
                    { text: '推荐商品', value: 3 }
                ],
                option2: [
                    { text: '默认排序', value: 'id' },
                    { text: '价格排序', value: 'price' },
                    { text: '库存排序', value: 'stock' },
                ],
                value1: 0,
                value2: 'id',
                typeList: [],
                typeid: 0,
                productList: []
            }
        },
        methods: {
            async productData() {

                let data = {
                    keywords: this.keywords,
                    typeid: this.typeid,
                    flag: this.value1,
                    orderby: this.value2
                }

                var result = await this.$api.productType(data)

                if (result.code == '1') {
                    this.typeList = result.data.typeList
                    this.productList = result.data.productList
                }

            },
            SelectKeywords() {
                this.productData();
            },
            SelectType(val) {
                this.showPopup = false
                this.typeid = val
                this.productData();
            },
            SelectGoods() {
                this.productData();
            },
            SelectSort() {
                this.productData();
            }
        }
    }
</script>
<style scoped>
    .typelist {
        width: 10rem;
        height: 42rem;
    }

    .typelist a {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        line-height: 3em;
        border-bottom: 1px solid #ccc;
    }
</style>